<template>
  <div class="slice" :style="getDropDownWidth">
    <div v-for="(cardData,index) in manyCardData">
      <card
        :cardData="cardData"
        @clickUrl="clickUrl"
        :showBackground="showBackground"
        :textWidth="textWidth"
        :paddingWidth="paddingWidth"
      ></card>
    </div>
  </div>
</template>

<script>
  import card from './titleV2/card'
  import {MANY_CARD_DEMO_DATA} from '@util/constant'
  import {sum, fill} from 'lodash'

  export default {
    name: "dropDown",
    model: {},
    props: {
      direction: {
        type: String,
        default: 'column'
      },
      manyCardData: {
        type: Array,
        default: function () {
          return MANY_CARD_DEMO_DATA
        }
      },
      count: {
        type: Number,
        default: 2
      },
      showBackground: {
        type: Boolean,
        default: false
      },
      textWidth: {
        type: Number,
        default: 70
      },
      paddingWidth: {
        type: Number,
        default: 15
      }
    },
    components: {
      card
    },
    data() {
      return {
        cardWidths: []
      }
    },
    computed: {
      getDropDownWidth: function () {
        if (this.direction === 'column') {
          return {width: this.cardWidths[0] + 'px'}
        } else {
          return {width: sum(this.cardWidths) + 'px', display: 'flex'}
        }
      },
      getOneLabelWidth: function () {
        return this.textWidth + this.paddingWidth
      }
    },
    beforeCreate: function () {

    },
    created: function () {

    },
    beforeMount: function () {

    },
    mounted: function () {
      this.getOneLineDisplayArrayWidth()
    },
    updated: function () {

    },
    activated: function () {

    },
    deactivated: function () {

    },
    beforeDestroy: function () {

    },
    destroyed: function () {

    },
    methods: {
      getOneLineDisplayArrayWidth() {
        if (this.direction === 'row') {
          let tmp = new Array(this.manyCardData.length)
          fill(tmp, this.getOneLabelWidth * this.count)
          this.cardWidths.splice(0, 0, ...tmp)
        } else {
          this.cardWidths.push(this.getOneLabelWidth * this.count)
        }
      },
      clickUrl(url) {
        this.$emit('clickUrl', url)
      }
    }
  }
</script>

<style scoped lang="scss">
  .slice {
    border: 1px solid #e3e4e5;
    z-index: 99;
    background-color: white;
  }
</style>
